<template>
  <li class="item">
    <label :for="todo.id">
      <input type="checkbox" :checked="todo.done" @change="hanldeClick(todo.id)">
      <!-- 
        也可以实现功能 
        只是vue没有深度监听到 所以不报错  
        如果是浅层的会 直接报错 
        因为v-model 是双向数据绑定 会影响props的值（只读）
      -->
      <!-- <input type="checkbox" v-model="todo.done"> -->
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="handleDel(todo.id)">删除</button>
  </li>
</template>

<script>
  export default {
    name: "MyItem",
    // 声明接收todo对象
    props: ['todo', 'checkTodo', 'deleteTodo'],
    methods: {
      hanldeClick(id) {
        // 通知App组件将对应的todo对象的done值取反
        this.checkTodo(id)
      },
      handleDel(id) {
        this.deleteTodo(id)
      }
    },
  }
</script>

<style lang="less">
  .item {
    padding: 10px 6px;
    & + .item {
      border-top: 1px solid #ddd;
    }
    &:hover {
      background-color: #dfdfdf;
      .btn {
        display: block;
      }
    }
    &:after {
      display: block;
      content: "";
      clear: both;
    }
  }
  .btn {
    float: right;
    display: none;
    margin-top: -4px;
  }
</style>